How to use the Prototype Window JavaScript classes This document is based on the Prototype window project created by Sébastien Gruhier and is located on: http://prototype-window.xilinus.com/index.html Description In ever page that you want to use the windows capabilities include, at least, the following JS files:
Note that there are more JS files for animation and debugging for example so include whatever you need. Next, include the following JS code:
var win; function openPopup(docId){ //Windows.closeAll(); try { if (win) { win.destroy(); win=null; } win = new Window({className: "docstoc", width:800, height:500, title:"Document Preview", showEffectOptions: {duration:0}, hideEffectOptions: {duration:0} } ); //win.setDestroyOnClose(); win.setContent('showDoc' + docId); win.showCenter(); } catch(e) { alert(e); } }
* Make sure to include the docstoc.css file the docstoc directory under themes. Next include the following style code at the top of the page. Is it needed in order to support full size Flash in FireFox:
* Note that you will need an ID (#showdocX) for every document DIV (see below) At the end of the document include a hidden DIV that includes individual DIVs for each document you want to show in a window. For example:
Note the yellow highlighted file names. You will need to dynamically create these when processing the page. The green highlighted areas need to match the styles defined above. Last, on every document image, include an onmouseover event like:
The number parameter has to match the number of the document in the appropriate DIV, so calling openPopup(1) will show the document defined in the “
” DIV.